<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            /* 
                100vw = 视口宽度 
                100vh = 视口高度 
                真实开发过程中vw和vh这种单位都是移动端用的比较多，再者就是vw用的多于vh
                因为我们开发很多时候关注的都是宽度，高度都是自然而然往下堆叠的
                再然后就是移动端经常有弹出小键盘占用视口的问题，导致vh受到影响，所以不建议使用
            */
            width: 20vw;
            height: 20vw;
            background-color: green;
        }

        .box2{
            /* 
                vmax会找到视口 宽和高 中更大的那一个当做参考，比如1920*1080, vmax就相当于vw
                而对于375*667, vmax就相当于vh

                vmin和vmax恰好相反，它取更小的那个作为参考，你懂我意思了吧
            */
            width: 20vmax;
            height: 20vmax;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>